<template>
  <a-layout-sider
    class="lc-menu-sider"
    breakpoint="lg"
    :width="320"
    :collapsed="collapsed"
    @collapse="onCollapse"
  >
    <a-collapse class="lc-menu-collapse" :default-active-key="[1]" accordion>
      <a-collapse-item v-if="config?.props" :key="1" header="基础设置">
        <a-scrollbar
          class="lc-menu-collapse-item"
          style="height: 50vh; overflow: auto"
        >
          <a-form :model="config.props" layout="vertical">
            <a-form-item
              v-for="(item, key) in model?.props"
              :key="key"
              :label="item.label"
              :help="item.help"
              show-colon
            >
              <component
                :is="item.model()"
                :placeholder="item.placeholder"
                v-model="config.props[key]"
              ></component>
            </a-form-item>
          </a-form>
        </a-scrollbar>
      </a-collapse-item>
      <a-collapse-item v-if="config?.formItem" :key="2" header="表单设置">
        <a-scrollbar
          class="lc-menu-collapse-item"
          style="height: 50vh; overflow: auto"
        >
          <a-form :model="config.formItem" auto-label-width>
            <a-form-item
              v-for="(item, key) in model?.formItem"
              :key="key"
              :label="item.label"
              :help="item.help"
              show-colon
            >
              <component
                :is="item.model()"
                :placeholder="item.placeholder"
                v-model="config.formItem[key]"
              ></component>
            </a-form-item>
          </a-form>
        </a-scrollbar>
      </a-collapse-item>
      <a-collapse-item v-if="config?.events" :key="3" header="事件设置">
        <a-scrollbar
          class="lc-menu-collapse-item"
          style="height: 50vh; overflow: auto"
        >
          <a-form :model="config.events" layout="vertical">
            <a-form-item
              v-for="(item, key) in model?.events"
              :key="key"
              :label="item.label"
              :help="item.help"
              show-colon
            >
              <component
                :is="item.model()"
                :placeholder="item.placeholder"
                v-model="config.events[key]"
              ></component>
            </a-form-item>
          </a-form>
        </a-scrollbar>
      </a-collapse-item>
      <a-collapse-item v-if="config?.style" :key="4" header="样式设置">
        <template #extra>
          <a-button
            type="text"
            @click.stop="handleClick(config.style, 'style', '自定义样式设置')"
          >
            <template #icon> <icon-settings /></template>自定义设置
          </a-button>
        </template>
        <a-scrollbar
          class="lc-menu-collapse-item"
          style="height: 50vh; overflow: auto"
        >
          <a-form :model="config.events" layout="vertical">
            <a-form-item label="栅格格数">
              <a-slider
                v-model="config.grid.span"
                :default-value="24"
                :min="1"
                :max="24"
                :style="{ width: '90%' }"
              />
            </a-form-item>
            <a-form-item label="栅格间距">
              <a-slider
                v-model="config.grid.offset"
                :default-value="24"
                :max="24"
                :style="{ width: '90%' }"
              />
            </a-form-item>
            <a-form-item label="栅格布局"> </a-form-item>
          </a-form>
        </a-scrollbar>
      </a-collapse-item>
    </a-collapse>
    <a-drawer
      :width="drawerConfig.width"
      :visible="drawerConfig.visible"
      @ok="handleOk"
      @cancel="handleCancel"
      unmountOnClose
    >
      <template #title> {{ drawerConfig.title }} </template>
      <div>
        <MonacoEditor
          ref="MonacoEditRef"
          v-model="editJson"
          :language="language"
          :width="drawerConfig.widthEditor()"
          height="84vh"
        ></MonacoEditor>
      </div>
    </a-drawer>
  </a-layout-sider>
</template>
<script lang="ts">
import { defineComponent, ref, computed, reactive } from "vue";
import { useVModel } from "@vueuse/core";
import {
  IconCaretRight,
  IconCaretLeft,
  IconHome,
  IconCalendar,
} from "@arco-design/web-vue/es/icon";
import { customGlobalComponent } from "@/components/custom/index.tsx";
import { PropType } from "vue";
import { Container } from "@/components/custom/index.tsx";
import MonacoEditor from "@/components/MonacoEditor/index.vue";

export default defineComponent({
  components: {
    IconCaretRight,
    IconCaretLeft,
    IconHome,
    IconCalendar,
    MonacoEditor,
  },
  props: {
    config: {
      type: Object as PropType<Container>,
      default: () => ({}),
    },
  },
  emits: ["update:config"],
  setup(props, { emit }) {
    const config = useVModel(props, "config", emit);
    const custom = customGlobalComponent();
    const collapsed = ref(false);
    const model = computed(() => {
      if (props.config.name) {
        let name = props.config.name;
        return custom[name];
      }
      return null;
    });
    const onCollapse = () => {
      collapsed.value = !collapsed.value;
    };

    const MonacoEditRef = ref<InstanceType<typeof MonacoEditor>>();
    const editJson = ref("");
    const language = ref("json");
    const drawerConfig = reactive({
      key: "",
      visible: false,
      title: "",
      width: 620,
      widthEditor: () => {
        return drawerConfig.width - 50;
      },
    });
    const handleClick = (obj, key, value = "自定义设置") => {
      drawerConfig.key = key;
      drawerConfig.title = value;
      editJson.value = JSON.stringify(obj);
      drawerConfig.visible = true;
    };
    const handleOk = () => {
      let obj = JSON.parse(editJson.value);
      config.value[drawerConfig.key] = obj;
      drawerConfig.visible = false;
    };
    const handleCancel = () => {
      drawerConfig.visible = false;
    };
    return {
      model,
      MonacoEditRef,
      editJson,
      language,
      config,
      custom,
      collapsed,
      drawerConfig,
      handleOk,
      onCollapse,
      handleClick,
      handleCancel,
    };
  },
});
</script>
<style lang="scss" scoped>
.lc-menu-sider {
  .lc-menu-collapse {
    .lc-menu-collapse-item {
      background-color: var(color-bg-4);
    }
  }
}
</style>
